<template>
  <div class="mod-single-upload">
    <el-upload
      class="upload-demo"
      :action='ossServerUrl'
      :file-list="fileList"
      :data="ossAccessEntity"
      :before-upload="handleBeforeUpload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      list-type="picture">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <el-dialog :visible.sync="fullScreenPreviewDialog">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <el-button type="primary" icon="el-icon-zoom-in" circle />
  </div>
</template>

<script>
import {getUUID} from '@//utils'

export default {
  data () {
    return {
      ossServerUrl: '',
      ossAccessEntity: {
        Key: '',
        Policy: '',
        OSSAccessKeyId: '',
        Signature: '',
        // callback: '',
        expire: '',
        success_action_status: '200'
      },
      fileList: [],
      fullScreenPreviewDialog: false,
      dialogImageUrl: ''
    }
  },
  methods: {
    plusImage () {
      console.log('fileList === ', this.fileList[0])
      this.fullScreenPreviewDialog = true
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
      this.fileList = fileList
    },
    handlePreview (file) {
      console.log(file)
    },
    handleSuccess (response, file, fileList) {
      console.log('response === ', response)
      console.log('file === ', file)
      console.log('fileList === ', fileList)
      this.fileList = fileList
      this.dialogImageUrl = file.url
    },
    async handleBeforeUpload (file) {
      console.log(file)
      let ossSignatureResponse = await this.$mallHttp.get('/thirdParty/oss/getOssSignature')
      console.log('ossSignatureResponse === ', ossSignatureResponse)
      let isResponseNormally = this.mallUtils.isResponseNormally(ossSignatureResponse)
      if (isResponseNormally) {
        const ossAccessResult = ossSignatureResponse.data.ossAccessDTO
        console.log('ossAccessResult === ', ossAccessResult)
        this.ossServerUrl = 'https://' + ossAccessResult.host
        this.ossAccessEntity.Key = ossAccessResult.dir + getUUID() + this.mallUtils.extractFileSuffix(file.name)
        this.ossAccessEntity.Policy = ossAccessResult.policy
        this.ossAccessEntity.OSSAccessKeyId = ossAccessResult.accessId
        this.ossAccessEntity.Signature = ossAccessResult.signature
        // this.ossAccessEntity.callback = ossAccessResult.callback
        this.ossAccessEntity.expire = ossAccessResult.expire
        console.log('this.ossAccessEntity === ', this.ossAccessEntity)
      }
    }
  }
}
</script>
